<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <title>用户列表</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<%--    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>--%>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarSupportedContent" >
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
<%--            <a class="nav-link" href="/addUser.jsp">添加用户</a>--%>
            <button class="btn btn-lg btn-dark btn-block" type="button"
                    data-toggle="modal" data-target="#exampleModal"
                    data-whatever="新增用户" onclick="addUser()">添加用户</button>
        </li>
    </ul>
</div>
</nav>
<%--欢迎${ok}登录 <a href="/logout.do"><input type="button" value="退出登录"/></a>--%>

    <table class="table table-hover table-bordered table-dark" style="height: 800px;">
        <thead class="thead-dark">
        <tr>
            <th scope="col">编号</th>  <th scope="col">用户名</th>  <th scope="col">真实姓名</th>  <th scope="col">地址</th>  <th scope="col">电话</th><th scope="col">头像</th> <th scope="col">操作</th><th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="user" items="${page.list}">
            <tr scope="row">
                <td>
                    ${user.user_id}
                </td>
                <td>
                        ${user.username}
                </td>
                <td>
                        ${user.realName}
                </td>
                <td>
                        ${user.address}
                </td>
                <td>
                        ${user.tel}
                </td>
                <td>
                    <img src="http://localhost:8088/upload/${user.pic}" id="image" name="imagename" style="width: 50px;height: 50px;border-radius: 50%;">
                </td>
                <td>
                    <a href="javascript:if(confirm('是否删除？'))location.href='/user.do?m=deleteUser&user_id=${user.user_id}">删除</a>
                </td>
                <td>
<%--                <a href="javascript:if(confirm('是否删除？'))location.href='/user.do?m=deleteUser&user_id=${user.user_id}'">修改</a>--%>
                    <button class="btn btn-link" type="button"
                    data-toggle="modal" data-target="#exampleModal"
                     data-whatever="${user.user_id}" onclick="updateUser()">修改</button>
                </td>
            </tr>
        </c:forEach>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-lg justify-content-center">
        <c:choose>
            <c:when test="${page.currentPage>1}">
            <li class="page-item">
                <a class="page-link" aria-label="previous" href="user.do?m=selectUserLimit&pageNo=${page.currentPage-1}">
                <span aria-hidden="true">previous</span>
                </a>
            </li>
            </c:when>
            <c:otherwise>
            <li class="disabled">
                <a aria-label="previous">
                <span aria-hidden="true"></span></a>
            </li>
            </c:otherwise>
        </c:choose>

            <c:forEach var="i" begin="1" end="${page.pageCount}" step="1">
            <li class="${i==page.currentPage?'active':''}">
            <a class="page-link" href="user.do?m=selectUserLimit&pageNo=${i}">${i}</a>
            </li>
            </c:forEach>

        <c:choose>
        <c:when test="${page.currentPage<page.pageCount}">
        <li class="page-item">
            <a class="page-link" aria-label="Next" href="user.do?m=selectUserLimit&pageNo=${page.currentPage+1}">
                <span aria-hidden="true">Next</span>
            </a>
        </li>
        </c:when>
        <c:otherwise>
        <li class="disabled">
            <a aria-label="Next">
                <span aria-hidden="true"></span></a>
        </li>
        </c:otherwise>
        </c:choose>
    </nav>


<!-- 新增用户弹出框-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="eselectUserByIdxampleModalLabel">New message</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="adduserFrom" action="/user.do?m=addUser" enctype="multipart/form-data" method="post">
                    <div class="form-group">
                        <input id = "user_id" type="text" placeholder="id" name = "user_id" aria-disabled="false" class="form-control"/>

                        <label for="username" class="col-form-label">用户名:</label>
                        <input id = "username" type="text" placeholder="用户名" name = "username" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-form-label">姓名:</label>
                        <input  type="text" placeholder="姓名" name = "realname" class="form-control" id="name"/>
                    </div>
                    <div class="form-group">
                        <label for="address" class="col-form-label">地址:</label>
                        <input id="address" type="text" placeholder="地址" name = "address" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label for="tel" class="col-form-label">电话:</label>
                        <input id="tel" type="text" placeholder="电话" name = "tel" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label for="pic" class="col-form-label">头像:</label>
                        <input id="pic" type="file" name = "pic" class="form-control"/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" name = "sure"value="add" class="btn btn-primary" onclick="clickme()">确定</button>
                    </div>
                </form>

            </div>

        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    function addUser() {
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            modal.find('.modal-title').text('添加用户')
            modal.find('[name=sure]:button').val("add");
            // modal.find('.modal-body input').val("哈哈哈哈");
        });
    }
    function updateUser(){
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            $.post("user.do?m=selectUserById", {id:recipient},function (respText) {
                var upUser = JSON.parse(respText);

                modal.find('.modal-title').text('修改信息' + upUser.username)
                // modal.find('.modal-body input').val("哈哈哈哈");
                modal.find('[name=user_id]:input').text(upUser.user_id);
                modal.find('[name=username]:input').val(upUser.username);
                modal.find('[name=realname]:input').val(upUser.realName);
                modal.find('[name=address]:input').val(upUser.address);
                modal.find('[name=tel]:input').val(upUser.tel);
                modal.find('[name=pic]:input').val(upUser.pic);
                modal.find('[name=sure]:button').val("update");
            });

        });
    }
    function clickme(){
        var form=document.getElementById("adduserFrom");
        if($('[name=sure]:button').val()==="update"){
            form.action="/user.do?m=updateUser";
        }else{
            form.action="/user.do?m=addUser";
            alert(${error});
        }
       form.submit();
    }
</script>
<%--<script type="text/javascript">--%>
<%--    $.post("http://localhost:8089/test.do",{name:"李四"},function (respText) { $("#test").html(respText);--%>
<%--</script>--%>

</html>
